<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>用户账号管理</title>
<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
<link rel="stylesheet" href="plug-in/layui/css/layui.css" type="text/css"></link>
<script type="text/javascript" src="plug-in/layui/lay/dest/layui.all.js"></script>
</head>
<body>
	<jsp:include page="../header.jsp"></jsp:include>
	<div class="layui-tab layui-tab-card" style="height:500px">
		<ul class="layui-tab-title">
			<li class="layui-this">首页</li>
			<li>密保工具</li>
			<li>密码管理</li>
		</ul>
		<div class="layui-tab-content" style="height: 100px;">
			<div class="layui-tab-item layui-show">1</div>
			<div class="layui-tab-item">2</div>
			<div class="layui-tab-item">
				修改密码关系到您的账号安全，请先选择验证方式<br> <br>
				<div style="margin-left:80px">
					<a class="phone_verify"><i class="layui-icon"
						style="font-size: 60px; color: #1E9FFF;">&#xe63b;</i> </a> <br> <span
						style="margin-left:-19px">通过短信验证码</span><br> <br> <br>
					<a class="email_verify"><i class="layui-icon"
						style="font-size: 60px; color: #1E9FFF;">&#xe62a;</i> </a> <br> <span
						style="margin-left:-14px">通过邮箱验证</span>
				</div>
			</div>

		</div>
	</div>
	<div id="send_phone_update" style="text-align:center;display:none">
		<div>为了保证您的帐号安全，修改密码需要进行安全验证。</div>
		<br>
		<div>
			<label>手机号：</label><input type="text" class="phone_number"  placeholder="请输入手机号" /><br> <br> 
			<label>新密码：</label><input type="password" class="phone_password" placeholder="请输入密码" required lay-verify="required"/><br> <br>
			<label>确认密码：</label><input type="password" class="phone_password1" placeholder="请输入密码" required lay-verify="required"/><br> <br>
			<input type="password" class="phone_msg" placeholder="请输入验证码" required lay-verify="required"/>
			<input type="button" class="send_phone" value="发送验证码" /><br><br>
			<input type="button" value="提交" class="submit_phone" />
		</div>
	</div>
	<div id="send_email_update" style="text-align:center;display:none">
	<form method="post" action="">
		<div>为了保证您的帐号安全，修改密码需要进行邮箱验证。</div>
		<br>
		<div>
			<label>邮箱：</label><input type="email" class="email_number" placeholder="请输入邮箱" /><br> <br>
			 <label>新密码：</label><input type="password" class="email_password" placeholder="请输入密码" /></label><br> <br>
			  <label>确认密码：</label><input type="password" class="email_password1" placeholder="请输入密码" /></label><br> <br>
			 <input type="password" class="email_msg" placeholder="请输入验证码" />
			 <input type="button" class="send_email" value="发送验证码" /><br><br>
			 <input type="button"  class="submit_email"  value="提交" />
		</div>
		</form>
	</div>
	<input type="hidden" value="" class="randomCode"/>
	<input type="hidden" value="" class="EmailCode"/>
	<script type="text/javascript">
		$(".phone_verify").on("click", function() {
				layer.open({
					type : 1, //Page层类型
					area : [ '500px', '300px' ],
					title : '修改密码',
					shade : 0.6, //遮罩透明度
					anim : 1, //0-6的动画形式，-1不开启
					content : $("#send_phone_update")
				});
			});
	</script>
	<script type="text/javascript">
		$(".email_verify").on("click", function() {
			layui.use('layer', function() {
				var layer = layui.layer;
				layer.open({
					type : 1, //Page层类型
					area : [ '500px', '300px' ],
					title : '修改密码',
					content : $("#send_email_update")
				});
			});
		});
	</script>
	<!-- 发送手机验证码 -->
	<script type="text/javascript">
		$(".send_phone").on("click",function(){
			var phone=$(".phone_number").val().trim();
			if(phone.length!=0){
				$.ajax({
					url:"sendMsgController/sendPhoneMsg?phone="+phone+"&typeId=1",
					success:function(msg){
						if(msg==null){
							layer.msg("手机号码错误，请输入正确的手机号码");
						}else if(msg!=null){
							layer.msg("验证码已发送，请注意查收");
							$(".randomCode").val(msg);
							$(".send_phone").css("disabled","disabled");
						}
					}
				});
			}else{
				layer.msg("请输入手机号码");
			}
		});
	</script>
	<!-- 提交手机修改密码 -->
	<script type="text/javascript">
		$(".submit_phone").on("click",function(){
			var phone_msg=$(".phone_msg").val();
			var randomCode=$(".randomCode").val();
			console.log(phone_msg);
			console.log(randomCode);
			if(phone_msg==randomCode){
			var password=$(".phone_password").val();
			var password1=$(".phone_password1").val();
				if(password==password1){
					$.ajax({
					url:"userInfo/updatePasswordByPhoneCode?password="+password,
					success:function(msg){
						if(msg>0){
							layer.msg("密码修改成功!");
							location.href="jsp/back-stage/accountManager.jsp";
						}else{
							layer.msg("网络错误，密码修改失败!");
						}
					}
				});
				}else{
					layer.msg("两次密码输入不相同，请重新输入！");
				}
			}
			else{
				layer.msg("验证码输入错误，请重新输入");
			}
		});
	</script>
	<!-- 发送邮箱验证码 -->
	<script type="text/javascript">
		$(".send_email").on("click",function(){
			var emailAddress=$(".email_number").val().trim();
			$.ajax({
				url:"sendEmailController/sendEmailCode?emailAddress="+emailAddress,
				success:function(msg){
					if(msg!=null){
						layer.msg("邮箱验证码发送成功！");
						$(".EmailCode").val(msg);
					}else{
						layer.msg("邮箱验证码发送失败！");
					}
				}
			});
		});
	</script>
	<!-- 提交邮箱修改密码 -->
	<script type="text/javascript">
		$(".submit_email").on("click",function(){
			var phone_msg=$(".email_msg").val();
			var randomCode=$(".EmailCode").val();
			console.log(phone_msg);
			console.log(randomCode);
			if(phone_msg==randomCode){
			var password=$(".email_password").val();
			var password1=$(".email_password").val();
				if(password==password1){
					$.ajax({
					url:"userInfo/updatePasswordByPhoneCode?password="+password,
					success:function(msg){
						if(msg>0){
							layer.msg("密码修改成功!");
							location.href="jsp/back-stage/accountManager.jsp";
							
						}else{
							layer.msg("网络错误，密码修改失败!");
						}
					}
				});
				}else{
					layer.msg("两次密码输入不相同，请重新输入！");
				}
			}
			else{
				layer.msg("验证码输入错误，请重新输入");
			}
		});
	</script>
</body>
</html>
